/**
 * 委托列表，当前委托和历史委托
 */

import React, { Component } from 'react';
import {
    View, Text, TouchableOpacity, StyleSheet
} from 'react-native';

import EntrustItem from './EntrustItem';
import { scaleSize, scaleFontSize } from '../util/size';
import { IEntrustItem } from '../interface';

const ONEDAYSECOND = 24 * 60 * 60 * 1000;

const ORDER_STATE_MAP = {
    1: '已申报',
    2: '部分成交',
    3: '完全成交',
    4: '撤单'
}

type ICurrentEntrustTab = 'now' | 'history';

interface IState {
    currentEntrustTab: ICurrentEntrustTab
}

interface IProps {
    data: Array<IEntrustItem>,
    cancelOrder: Function,
}

class EntrustList extends Component<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            currentEntrustTab: 'now'
        }
    }

    updateCurrentTab = (tabName: ICurrentEntrustTab) => {
        this.setState({currentEntrustTab: tabName});
    }

    renderTab = () => {
        let {currentEntrustTab} = this.state;
        let nowEntrustTabStyle, historyEntrustTabStyle;
        if (currentEntrustTab === 'now') {
            nowEntrustTabStyle = styles.activeTab;
            historyEntrustTabStyle = styles.inactiveTab;
        } else {
            nowEntrustTabStyle = styles.inactiveTab;
            historyEntrustTabStyle = styles.activeTab;
        }
        return (
            <View style={{ display: 'flex', flexDirection: 'row', paddingLeft: scaleSize(20), marginTop: scaleSize(10), marginBottom: scaleSize(7) }}>
                <TouchableOpacity onPress={() => {
                    this.updateCurrentTab('now');
                }}>
                    <Text style={[nowEntrustTabStyle]}>当前委托</Text>
                </TouchableOpacity>

                <TouchableOpacity onPress={() => {
                    this.updateCurrentTab('history');
                }}>
                    <Text style={[historyEntrustTabStyle, { paddingLeft: scaleSize(30) }]}>历史委托</Text>
                </TouchableOpacity>
            </View>
        )
    }

    renderTransaction = () => {
        const {currentEntrustTab} = this.state;
        let sourceData = this.props.data;
        let data: any = [];

        if (currentEntrustTab === 'history') {
            data = sourceData.filter(v => {
                //Date.now() - (new Date(v.dt)).getTime() <= ONEDAYSECOND &&
                return (v.state == 3 || v.state == 4)
            })
        } else if (currentEntrustTab === 'now') {
            data = sourceData.filter(v => {
                //Date.now() - (new Date(v.dt)).getTime() <= ONEDAYSECOND &&
                return (v.state == 1 || v.state == 2)
            })
        }

        data = data.sort((u, v) => {
            return (new Date(u.dt).getTime() < new Date(v.dt).getTime())
        })

        return (
            <View style={{}}>
                {
                    data.map((v, index) => {
                        return (
                            <EntrustItem {...v} current={currentEntrustTab} cancelOrder={this.props.cancelOrder} key={`EntrustItem-${index}`} />
                        )
                    })
                }
            </View>
        )
    }

    /**
    * 最近委托
    */
    renderRecentTransaction = () => {
        
    };

    renderHistoryTransaction = () => {

    }

    render() {
        return (
            <View style={{

            }}>
                {
                    this.renderTab()
                }
                {
                    this.renderTransaction()
                }

            </View>
        )
    }
}

export default EntrustList;

const styles = StyleSheet.create({
    activeTab: {
        fontFamily: 'PingFangSC-Regular',
        fontSize: scaleFontSize(14),
        color: '#4A4A4A',
    },
    inactiveTab: {
        fontFamily: 'PingFangSC-Regular',
        fontSize: scaleFontSize(14),
        color: '#C5C5C5',
    }
})